<script>
import persistence from "../../../store/persistence"
import errorCorrection from "../../assets/errorCorrection.svg"
import { handleUrlParams } from "@/utils"

export default {
  name: "settings",
  data() {
    return {
      autoAudio: false,
      errorCorrection,
    }
  },
  methods: {
    handleUrlParams,
    autoAudioChange() {
      this.autoAudio = !this.autoAudio
      persistence.setters.setAutoAudioSetting(this.autoAudio)
    },
  },
  created() {
    this.autoAudio = persistence.getters.getAutoAudioSetting()
  },
  props: {
    currentWordItem: Object,
  },
}
</script>

<template>
  <view class="component">
    <view class="item" @click="() => autoAudioChange()" style="justify-content: space-between">
      <view style="display: flex; align-items: center">
        <checkbox :checked="autoAudio" style="transform: scale(0.7)"></checkbox>
        <text style="margin-left: 5rpx; font-size: 30rpx">是否自动播放读音</text>
      </view>
      <view
        style="display: flex; align-items: center"
        @click="
          () =>
            $uni.navigateTo({
              url: handleUrlParams('/vocabulary/pages/wordErrorCorrection/index', {
                wordId: currentWordItem.wordId,
                thesaurusId: currentWordItem.thesaurusId,
                enWord: currentWordItem.enWord,
              }),
            })
        "
      >
        <image :src="errorCorrection" style="width: 30rpx; height: 30rpx"></image>
        <text style="margin-left: 10rpx; font-size: 30rpx; color: var(--text-color-light)">单词纠错</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 0 60rpx;

  .item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
  }
}
</style>
